<template>
    <el-config-provider :locale="locales">
        <component
            :is="layout"
            v-if="layout"
        />
        <router-view v-else />
    </el-config-provider>
</template>

<script setup>
import { useMeta } from 'vue-meta';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import zhHK from 'element-plus/es/locale/lang/zh-tw';
import { transformLang } from '@/utils/tools';
import DefaultLayout from '@/layouts/default';
import FlexLayout from '@/layouts/flex';
import types from '@/store/types';
import site from '@/config/site';

const { proxy } = getCurrentInstance();
const route = useRoute();
const store = useStore();
const { t } = useI18n();

store.vm = proxy;

const layouts = shallowRef({
    default: DefaultLayout,
    flex: FlexLayout,
});

const layout = computed(() => {
    const { meta } = route;

    if (meta && meta.layout) {
        // 修复其他页面给body添加class不成功问题
        const list = document.body.classList;
        for (let i = 0; i < list.length; i += 1) {
            if (list[i].startsWith('layout-')) {
                document.body.classList.remove(list[i]);
            }
        }
        document.body.classList.add(`layout-${meta.layout}`);
    }

    return layouts.value[(meta && meta.layout)];
});

const showTheme = ref(true);

const locales = computed(() => {
    const { locale } = useI18n();

    const localeMap = {
        'zh-cn': zhCn,
        'en-us': en,
        'zh-hk': zhHK,
    };

    return localeMap[locale.value] || zhCn;
});

const setTheme = () => {
    let theme = 'day';

    if (showTheme.value) {
        theme = proxy.$theme.value;
    }

    document.querySelector('html').className = `theme-${theme}`;
};

watch([proxy.$theme, showTheme], ([theme]) => {
    if (theme) {
        setTheme();
    }
});

const init = async () => {
    // 生成浏览器指纹
    await store.dispatch(types.BUILD_FINGERPRINT_STR);
};

onBeforeMount(async () => {
    await init();
});

onMounted(async () => {
    setTheme();

    if (window?.Telegram?.WebApp?.platform !== 'unknown') {
        document.body.classList.add('telegram-body');
    }

    useMeta({
        htmlAttrs: {
            lang: transformLang(proxy?.$locale?.value),
        },
        title: route.meta.title ? t(route.meta.title) : t(site.title),
        description: 'This is the homepage.',
    });

    const meta = [
        {
            name: 'og:title',
            content: 'bitV',
        },
        {
            name: 'og:url',
            content: 'https://h5.dev.bitv-ex.com',
        },
        {
            name: 'og:description',
            content: '欢迎来到 bitV，开启虚拟资产投资之旅. 测试这是h5',
        },
        {
            name: 'og:image',
            content: 'https://www.bitv.com/static/img/Huobi_01.jpg',
        },
        {
            name: 'twitter:card',
            content: 'summary_large_image',
        },
        {
            name: 'twitter:title',
            content: 'bitV',
        },
        {
            name: 'twitter:url',
            content: 'https://h5.dev.bitv-ex.com',
        },
        {
            name: 'twitter:description',
            content: '欢迎来到 bitV，开启虚拟资产投资之旅. 测试这是h5',
        },
        {
            name: 'twitter:image',
            content: 'https://www.bitv.com/static/img/Huobi_01.jpg',
        },
        {
            name: 'twitter:image:alt',
            content: 'Alt text for image',
        },
    ];

    meta.forEach(item => {
        let dom = document.querySelector(`meta[name='${item.name}']`);

        if (dom) {
            dom.content = item.content;
            return;
        }

        dom = document.createElement('meta');
        dom.name = item.name;
        dom.content = item.content;
        document.head.appendChild(dom);
    });
});
</script>

<style lang="scss">
@import '@/assets/styles/public';
</style>
